<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="2">
          <div class="dul">
            <img src="../assets/89b12b33358445f3b990edc15a5b4477(1).png" />
          </div>
        </el-col>
        <el-col :span="3">
          <div><i class="el-icon-s-unfold"></i></div>
        </el-col>
        <el-col :span="3">
          <div class="hu">
            <el-input placeholder="职位 | 地区 | 工作年限 | 薪资 | 公司">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="hui">
            <el-dropdown>
              <span class="el-dropdown-link">
                Mana gement<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-s-cooperation"
                  >职位</el-dropdown-item
                >
                <el-dropdown-item icon="el-icon-map-location"
                  >地区</el-dropdown-item
                >
                <el-dropdown-item icon="el-icon-date"
                  >工作年限</el-dropdown-item
                >
                <el-dropdown-item icon="el-icon-coin">薪资</el-dropdown-item>
                <el-dropdown-item icon="el-icon-office-building"
                  >公司</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="huy">
            <el-dropdown>
              <span class="el-dropdown-link">
                <i class="el-icon-s-tools el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-error">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <i class="el-icon-menu"></i>
            <i class="el-icon-full-screen"></i>
            <i class="el-icon-bell"></i>
            <el-dropdown class="hut">
              <span class="el-dropdown-link">
                {{ msg }}<i class="el-icon-arrow-down"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-user-solid"
                  >个人中心</el-dropdown-item
                >
                <el-dropdown-item icon="el-icon-postcard"
                  >账号管理</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
      </el-row>
      <div class="demo">
        <img src="../assets/1160169(1).jpg" />
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
          default-active="apath"
          background-color="#0c0c0c"
          text-color="#fff"
          active-text-color="#ffd04b"
          class="el-menu-vertical-demo"
          :unique-opened="true"
          :collapse-transition="false"
          :router="true"
        >
          <!--一级菜单-->
          <el-submenu :index="item.id + ''" v-for="item in list" :key="item.id">
            <template slot="title">
              <i :class="item.img"></i>
              <span style="font-weight: 900">{{ item.type }}</span>
            </template>
            <!--二级菜单-->
            <el-menu-item
              :index="item1.qurl + ''"
              v-for="item1 in item.children"
              :key="item1.id"
            >
              <template slot="title">
                <div class="pl">
                  <i :class="item1.img"></i>
                  <span @click="spath(item1.qurl)">{{ item1.type }}</span>
                </div>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { CreateTree } from "../http/user.js";
export default {
  data() {
    return {
      msg: "",
      UserID: "",
      RoleID: "",
      list: [],
      apath: "",
    };
  },
  methods: {
    // 保存链接的激活状态
    spath(s) {
      this.apath = s;
    },
    fill() {
      CreateTree({
        params: {
          pid: this.RoleID,
        },
      }) 
        .then((res) => {
          console.info(res);
          this.list = res.Data;
        })
        .catch((err) => {
          console.info(err);
        });
    },
  },
  mounted() {
    this.RoleID = this.$store.state.RoleID;
    this.msg = this.$store.state.name;
    this.UserID = this.$store.state.UserID;
    this.$store.commit("UserID", this.UserID);
    this.fill();
  },
  watch: {
    "$store.state.setRightList": function () {
       this.fill();
    },
  },
};
</script>

<style scoped>
.el-header {
  color: #333;
  text-align: center;
  line-height: 60px;
  padding: 0px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border: solid 1px rgb(237, 240, 243);
  overflow: hidden;
}

.el-aside {
  background-color: black;
  color: #333;
  text-align: center;
  line-height: 200px;
  border-bottom-left-radius: 10px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  border-bottom-right-radius: 10px;
}

.el-container {
  height: 737px;
}
.dul {
  width: 199px;
  overflow: hidden;
}
.dul img {
  width: 140%;
  background-image: url("../assets/R-C.png");
}
.hu {
  margin-left: -80px;
}
.hui {
  margin-left: -120px;
}
.huy {
  margin-right: -1145px;
}
.hut {
  margin-right: -335px;
}
i.el-icon-menu {
  position: fixed;
  top: 33px;
  right: 295px;
}

i.el-icon-full-screen {
  position: fixed;
  top: 33px;
  right: 255px;
}
i.el-icon-bell {
  position: fixed;
  top: 33px;
  right: 215px;
}
.demo {
  width: 45px;
  height: 45px;
  position: fixed;
  top: 16px;
  right: 130px;
  overflow: hidden;
  border-radius: 50%;
}
.demo img {
  width: 100%;
  height: 100%;
}
ul.el-menu-vertical-demo.el-menu {
  width: 99%;
  border: black;
}
main.el-main {
  height: 680px;
}
.el-container[data-v-7b4b534a] {
  height: 737px;
}
.pl {
  margin-left: 30px;
  font-size: 1px;
}
</style>